import type { FieldListItem } from '@/components/form'
import { ElInput } from 'element-plus'

export const useFormList = (formData: any): FieldListItem[] => {
  return [
    {
      label: '姓名',
      prop: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入姓名' }]
    },
    {
      label: '年龄',
      prop: 'age',
      type: 'select',
      options: [
        { label: '18', value: 18 },
        { label: '19', value: 19 },
        { label: '20', value: 20 }
      ],
      attrs: {
        placeholder: '请选择年龄'
      },
      labelWidth: 80,
      rules: [{ required: true, message: '请输入年龄' }]
    },
    {
      label: 'renderDefault',
      prop: 'value',
      renderDefault: () => (
        <ElInput v-model={formData.value} placeholder="请输入内容" />
      ),
      rules: [{ required: true, message: '请输入值' }]
    },
    {
      label: 'renderLabel',
      prop: 'value',
      type: 'input',
      renderLabel: () => <span>我是自定义label</span>,
      rules: [{ required: true, message: '请输入值' }]
    },
    {
      label: 'renderError',
      prop: 'value',
      type: 'input',
      attrs: {
        placeholder: '自定义的placeholder',
        clearable: true
      },
      renderError: ({ error }) => <span>{error}</span>
      // rules: [{ required: true, message: '请输入值' }]
    },
    {
      label: 'radio',
      prop: 'radio',
      type: 'radio',
      options: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' },
        { value: 3, label: '选项3' }
      ]
    }
  ]
}
